<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>中国境内经纬度转换工具</title>
    <style>
        body {
            margin: 0px;
            background-color: #f9f9f9;
            color: #333;
        }

        ul {
            list-style: none;
            background-color: #FFF;
            border: solid 1px #EEEEEE;
            padding: 8px;
            font-size: 13px;
            color: rgb(112, 112, 112);
        }

        li {
            line-height: 25px;
        }

        .data-area {
            float: left;
            font-size: 0;
        }

        .title {
            font-size: 24px;
            padding: 16px 0px;
            color: #666;
        }

        textarea {
            padding: 6px;
            font-size: 16px;
            border: 1px solid #CCC;
            width: 480px;
            margin-top: 20px;
        }

        .colorbar {
            width: 100%;
            height: 2px;
            z-index: 11;
            background: url("data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAB58AAAABCAIAAABmLv4HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1MmY2ZWVlYi02NDllLTQxNDgtODU5ZC1lMGFkYWJiNDNjMTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkM1RjU1NTUxMEJFMTFFNUEyNUI5ODdGRDZBM0VDNzYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkM1RjU1NTQxMEJFMTFFNUEyNUI5ODdGRDZBM0VDNzYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozZjZmZTJkMC02ODlhLTRlOWEtYTc4MS1mNTg3NmY5ZGQyZDciIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2MmE4YWY4Yy00OTg4LTExNzgtYmU1NC05OTVkYjZiYjU3NGMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6IkKSiAAAB5UlEQVRYw9VY0bLrIAhcvuO+nv//xO59SFRAVDTNzDmdTgaWZSXEtlL5+UcKANxXAAICqEa5Ok51RzSIJ+jQbUc6nqnSteb1YjEq0vQ1aKMMQPpomD6PfolwFx/hzmaCY7rkOJ17yAz5rs4Rx5WaUPPGwbXfXVGoGRN76U7ACf4KQXwrwv7MwUzKEt9yDwi7xhPaQzsfShK2wGXot704KJxrcqzAaQoXtow4c5Dd6vtGW9oRVq4syREoTNFSKeOrPOEvyUvNZRnhPSaYszpZarvenw4h8PGuJxDyse5YTS4cgY4pA0Yzpim7gdggSNcEwYwmXeele75iey5uQ57+zuz+ZibPKfq40dvJg8xXyLtZGfCAE6SIcsUytesOOGLVNplhol99IJUkYMSZMCf4QDC/Oe24FkxsCmT5lE2mRgKAHTHNoBlPnxTen/aGU7sUBbYsAGxRgMIWrW4haIWiTJULRmqsNzXQubLaoqVFtYB4uWKbOougvmsjWBsYJFLhpWC9tH4Kqi2wS6BbBc5VFapHSfd3QoSo/aMPE+VbmtGsyfaVHh3v/tBJdvM4LvvI2ZjxdftgjjoAn6S8Udhrs6KcPfEn+yoT4k4oM62lXe6PbSn7jPBgGnyU+2phL9n5UHIXGeQ/IU/bghy3yoMAAAAASUVORK5CYII=") center no-repeat;
            position: relative;
        }

        .content_width {
            width: 1024px;
            margin: 0 auto;
            /* background-color: blue; */
        }

        #result_gps {
            border: 1px solid #EEEEEE;
            outline: none;
            background-color: #EEEEEE;
        }

        select {
            text-align: center;
            height: 36px;
            line-height: 36px;
            text-align-last: center;
            border: 1px solid #CCC;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            -webkit-border-radius: 4;
            -moz-border-radius: 4;
            border-radius: 4px;
            color: #ffffff;
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            padding: 0px 12px 0px 12px;
            background: #47b3e6;
            border: solid #47b3e6 1px;
            text-decoration: none;
            margin: 0px 14px;
        }

        button:hover {
            color: #ffffff;
            background: #2a70bf;
            text-decoration: none;
        }

        .button-white {
            -webkit-border-radius: 4;
            -moz-border-radius: 4;
            border-radius: 4px;
            color: #2a70bf;
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            padding: 0px 12px 0px 12px;
            background: #FFF;
            border: solid #47b3e6 1px;
            text-decoration: none;
            margin: 0px 14px;
        }

        .button-white:hover {
            color: #ffffff;
            background: #2a70bf;
            text-decoration: none;
        }

        textarea::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #999;
            font-size: 14px;
        }

        textarea::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #999;
            font-size: 14px;
        }

        textarea:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #999;
            font-size: 14px;
        }

        .copyright {
            text-align: center;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            color: rgb(192, 192, 192);
            padding-top: 35px;
            position:relative;
        }
    </style>
	<script src="gps.js"></script>
</head>

<body>
    <div>
        <div class="content_width title">
            <img style="vertical-align:middle;"
                src='data:img/jpg;base64,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HpaZYI5z3JTzOGSqTbA56Noee0Q66bEO0W0dImX2YhFp5fASIq8B3xfh+ZqlLcEKkDKjiG3Rbx2rUtVupdQB3gCeNpb9AjBXjbnngX8m2PL8NsFufbzmQosIfXqUXg6T05PMyhlm5SwFFpr0r4WEIS799NpH6LOOEJMeBIPir7cnC7wEfNcKhV8WY7KNQz+B+v7sXwL/0OjLWhZtkeNmqoB+SLCJnEGVpcvvEe7pI+PksCp1IzqATxAcM3gcGGl2rEFRiiywIBe54Z1lOn+Zvu5B9vYcIlWNx05zBxFJV5dyNtgzQbCp/WPg14CDKlZHB+XFReIDe7YD24JJMEVwAuZfBc7rumXeaDJdf75y4S3UX0tCVsjDq1iHCc5X/AnBAZOmPVcwFCsrTK2eIToAhwYfJmVGsatUZUM8cpHgjMZ/qDDZOE5utKWRsduBLVW99T3gJXwmGxNpK6XrZer82bXVteBhL8Hu/tcIKB6rI6i4ZDM5+oaG6B/e2ypL5whO3fwLwW79zGYOXy+NMbs+O2SB/wGeJoiDIIuY9kHWpHYSJjgk4gNyHfgu8CzwMMFpl08D3Wt5YUNLzgMvEOSC14AigBhFfWnLnkawk8BS1XPPAD8CztSV+oJv+cQSnW2D3Az0lXNvo8YHlTzwU4JzUveIyOMoTxJQnCrad4AfAM8BF2Btv3onDodmGoeBe4Flz6u8b1lrZw99K0RHR8euQW4ljcf8MssrhCLhsWKh+NX+oeET/cN7f6aqPwKaBsw7BdkK7AbZrdLdgk6mU8zNzJJdWWHPyL7QwMhoBahOMW7dnv8f66MNcuH1VwFIpjvZMzqG73lEUrfH6f8LE1pnzexciW8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDgtMTBUMjE6Mzk6NDArMDg6MDBC5L0/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA4LTEwVDIxOjM5OjQwKzA4OjAwM7kFgwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADUwNQjy92MAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANjI1q3N75QAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTY1NDQ0MzgwhDkiVgAAABJ0RVh0VGh1bWI6OlNpemUAMjI0NDFCoQf9PQAAAGJ0RVh0VGh1bWI6OlVSSQBmaWxlOi8vL2hvbWUvd3d3cm9vdC9uZXdzaXRlL3d3dy5lYXN5aWNvbi5uZXQvY2RuLWltZy5lYXN5aWNvbi5jbi9maWxlcy8xMjMvMTIzNjIwMC5wbmfeNF2eAAAAAElFTkSuQmCC' />
            <font>中国境内经纬度转换工具</font>
            <span class="copyright">Design By ChangSir V1.0 </span>
        </div>
        <div class="colorbar"></div>
        <div class="content_width">
            <ul>
                <li>1.坐标系说明：DB-09百度、天地图CGCS2000(约等于WGS84)、GCJ-02 高德/腾讯/谷歌地图</li>
                <li>2.智能识别各类格式，自动转换</li>
                <li>3.能够识别度分秒(1°2′3″)格式</li>
                <li>4.度分秒(1°2′3″)转小数格式，请直接点击格式化</li>
            </ul>
        </div>
        <div class="content_width">
            <div>
                <select id="ognSelect">
                    <option value="BD09">百度地图(BD-09)</option>
                    <option value="WGS84">天地图(CGCS2000)</option>
                    <option value="GCJ02">腾讯地图/高德地图(GCJ-02)</option>
                </select>

                <font style="margin: 0px 20px 0px 20px; color:#666; font-weight: bold;">→</font>

                <select id="targetSelect">
                    <option value="WGS84">天地图(CGCS2000)</option>
                    <option value="BD09">百度地图(BD-09)</option>
                    <option value="GCJ02">腾讯地图/高德地图(GCJ-02)</option>
                </select>
                <button id="convert">转换</button>
                <button id="format" class="button-white">格式化(度分秒转小数)</button>
                <font id="info"></font>
            </div>
            <div class="data-area">
                <textarea id="input_gps" rows="10"
                    placeholder="（请确保输入的坐标是由2个点组成）&#10;自动识别各种格式，如：&#10;经度：111.23456 纬度：33.45678&#10;lng:111.23456 lat:33.45678&#10;111.23456,33.45678&#10;123°4.5′6″,35°5.6′6.8″&#10;等格式..."></textarea>
                <textarea id="result_gps" rows="10" readonly
                    placeholder="结果格式(经度,纬度)如：&#10;111.23456,33.456"></textarea>
            </div>
        </div>
    </div>
</body>

</html>